<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./index.css" />
    <title>实时获取窗口变化的信息</title>
  </head>
  <body>
    <div class="yincang"></div>
    <script>
      // onresize事件会在每次浏览器视口发生变化的时候触发，
      window.onresize = function () {
        console.log(window.innerWidth);
        console.log(window.innerHeight);
      };
      // onload事件会在页面加载完成的时候触发，
      window.onload = function () {
        console.log("---------张三---");
        console.log(window.innerWidth);
        console.log(window.innerHeight);
      };
      // onbeforeunload事件会在页面卸载前触发，
      window.onbeforeunload = function () {
        console.log("卸载前");
      };

      //获取文档的宽度和高度，这里的documentElement表示html标签
      console.log(document.documentElement.clientWidth);
    </script>
  </body>
</html>
